<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户查询</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">用户查询</h3>
            <el-row :gutter="20">

              <el-col :span="20">
              <el-row style="margin-bottom: 20px;text-align: left" >
                <span style="padding: 10px ;font-size: 18px">普通会员等级</span>
                <el-button plain @click="searchUser(0)">不限</el-button>
                <el-button plain v-for="item in memberList" :key="item.id" @click="searchUser(item.id)">{{ item.membername }}</el-button>
              </el-row>
              </el-col>
              <el-col :span="20">
                <el-row style="margin-bottom: 20px;text-align: left" >
                  <span style="padding: 10px;font-size: 18px;margin-right: 20px" >是否是付费会员</span>
                  <template>
                    <el-radio v-model="isVip"  :label="5" @change="changeUser">不限</el-radio>
                    <el-radio v-model="isVip"  :label="1" @change="changeUser">付费会员</el-radio>
                    <el-radio v-model="isVip"  :label="0" @change="changeUser">非付费会员</el-radio>
                  </template>

                </el-row>
              </el-col>
            </el-row>
        </el-card>
      <el-card style="margin-top: 30px">
            <el-table :data="userList" border stripe>
                <el-table-column type="index"></el-table-column>
              <el-table-column label="用户信息">
                <template slot-scope="scope">
                       {{scope.row.username}}<br>
                         {{scope.row.tel}}
                </template>
              </el-table-column>
              <el-table-column label="会员等级" prop="member.membername" ></el-table-column>
              <el-table-column label="用户标签"  width="200px" >
                <template slot-scope="scope"><el-tag v-for="f in scope.row.labels" style="margin: 5px">{{f.labername}}</el-tag></template>
              </el-table-column>
              <el-table-column label="消费次数" prop="consumptionTimes" width="120px"></el-table-column>
              <el-table-column label="消费金额(元)" prop="consumptionAmount" width="120px"></el-table-column>
              <el-table-column label="用户状态" width="120px">
                  <template slot-scope="sc">{{sc.row.status==1?'启用':'禁用'}}</template>
              </el-table-column>
              <el-table-column label="注册时间" prop="inserttime"></el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="goUserDetails(scope.row)">用户详情</el-button>
                      <el-button type="text"  @click="showEditLabelDialog(scope.row)">编辑标签</el-button>
                        <el-button type="text"  @click="showEditSvipDialog(scope.row)">修改积分</el-button>
                      <el-button type="text"  @click="showEditGrowthValueDialog(scope.row)">修改成长值</el-button>
                        <el-button type="text"  @click="changeUserStatus(scope.row)">{{scope.row.status==1?'禁用':'启用'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>



        <!--编辑标签-->
      <el-dialog title="编辑标签" :visible.sync="editLabelVisible"  width="30%" :close-on-click-modal="false" @close="editLabelFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">选择标签</p>
        <el-form :model="editLabelForm" :rules="editLabelFormRules" ref="editLabelForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户id" prop="id">
            <el-input v-model="editLabelForm.id" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editLabelForm.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="labelId">
          <el-select v-model="labelids" multiple placeholder="请选择标签">
          <el-option :label="item.labername" :value="item.id" v-for="item in labelList" :key="item.id"></el-option>
          </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEditLabel">确 定</el-button>
                <el-button @click="editLabelFormClose">关 闭</el-button>
            </span>
      </el-dialog>

      <!--编辑成长值-->
      <el-dialog title="编辑成长值" :visible.sync="editGrowthVisible"  width="30%" :close-on-click-modal="false" @close="editGrowthFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">修改成长值</p>
        <el-form :model="editGrowthForm" :rules="editGrowthFormRules" ref="editGrowthForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户id" prop="id">
            <el-input v-model="editGrowthForm.uid" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editGrowthForm.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="当前成长值" prop="growthValue">
            <el-input-number v-model="editGrowthForm.growthValue" ></el-input-number>
          </el-form-item>
          <el-form-item label="操作备注" prop="beiZhu">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editGrowthForm.beiZhu"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEditGrowth">确 定</el-button>
                <el-button @click="editGrowthFormClose">关 闭</el-button>
            </span>
      </el-dialog>

      <!--非付费会员修改积分弹框-->
      <el-dialog title="编辑积分" :visible.sync="notSvip"  width="30%" :close-on-click-modal="false" @close="notSvipClose">
        <p style="font-size: 16px;">还不是付费会员</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="notSvipClose">关 闭</el-button>
            </span>
      </el-dialog>

      <!--付费会员修改积分弹框-->
      <el-dialog title="编辑积分" :visible.sync="editIntegralVisible"  width="30%" :close-on-click-modal="false" @close="editIntegralFormClose">
        <p style="font-size: 16px;border-bottom: 1px solid gainsboro;text-align: left">修改积分</p>
        <el-form :model="editIntegralForm" :rules="editIntegralFormRules" ref="editIntegralForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户id" prop="id">
            <el-input v-model="editIntegralForm.uid" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editIntegralForm.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="当前成长值" prop="integral">
            <el-input-number v-model="editIntegralForm.integral" ></el-input-number>
          </el-form-item>
          <el-form-item label="操作备注" prop="beiZhu">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editIntegralForm.beiZhu"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEditIntegral">确 定</el-button>
                <el-button @click="editIntegralFormClose">关 闭</el-button>
            </span>
      </el-dialog>




    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                memberList: [],
                SVipList:[],//付费会员等级
                userList:[],//所有用户列表
                userDetailsList:[],//用户详情
                total: 9,
                memberId: "",
                isVip:5,
                editGrowthVisible:false,//成长值
                editLabelVisible:false,//标签编辑
                notSvip:false,//不是付费会员修改积分弹框
                editIntegralVisible:false,//付费会员修改积分
                labelList:[],
              labelids:[],
              editLabelForm:{
                id:"",
                username:"",
                labelId:[]
              },
              editGrowthForm:{
                uid:"",
                username:"",
                growthValue:"",
                beiZhu:""
             },
              editIntegralForm:{
                uid:"",
                username:"",
                integral:"",
                beiZhu:""
              },
              editIntegralFormRules:{

              },
              editGrowthFormRules:{

              },
              editLabelFormRules:{
                /*  userCode: [
                     { required: true, message: "請輸入工号", trigger: "blur" },
                     { min: 4, max: 4, message: "工号必须是4个字符", trigger: "blur" }
                   ]*/
              },
            };
        },
        methods: {
          doEditIntegral(){
            this.$refs.editIntegralForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "tuser/editIntegralBecauseAdministrators";
              this.$axios.put(url,this.editIntegralForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editIntegralVisible = false ;
                  this.$refs.editIntegralForm.resetFields();
                  this.searchUser();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })

          },
          editIntegralFormClose(){
            this.editIntegralVisible=false;
          },
          notSvipClose(){
            this.notSvip=false;
          },
          showEditSvipDialog(row){
            if(row.isSvip==0){
              this.notSvip=true;
            }else{
              this.editIntegralVisible=true;
              this.editIntegralForm.uid=row.id;
              this.editIntegralForm.username=row.username;
              let url = "tuser/querySvipByUserId";
              this.$axios.get(url, {
                params: {
                  uid:row.id
                }
              }).then(res => {
                if (res.data.code == 200) {
                    this.editIntegralForm.integral=res.data.data[0].integral
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  })
                }
              });
            }

          },
          changeUserStatus(row){
            let s=-1;
            if(row.status==1){
              s=0;
            }else if(row.status==0){
              s=1;
            }
           let url = "tuser/changeUserStatus";
            this.$axios.get(url,{
                  params:{
                    uid:row.id,
                    status:s
                  }
            }).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:"success",
                  message:res.data.msg,
                  duration:1000
                })
                this.searchUser();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },
          doEditGrowth(){
            this.$refs.editGrowthForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "tuser/editGrowthBecauseAdministrators";
              this.$axios.put(url,this.editGrowthForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editGrowthVisible = false ;
                  this.$refs.editGrowthForm.resetFields();
                  this.searchUser();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })
          },
          showEditGrowthValueDialog(row){
            this.editGrowthVisible=true;
            this.editGrowthForm.uid=row.id;
            this.editGrowthForm.username=row.username;
            let url = "tuser/queryUserDetails";
            this.$axios.get(url,{
              params:{
                uid:row.id,
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.userDetailsList = res.data.data;
                this.editGrowthForm.growthValue=res.data.data[0].growthValue
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },//成长值
          editGrowthFormClose(){
            this.editGrowthVisible=false
            this.$refs.editGrowthForm.resetFields();
          },
          goUserDetails(row){
            let url = "tuser/queryUserDetails";
            this.$axios.get(url,{
              params:{
                uid:row.id,
              }
            }).then(res=>{
              if (res.data.code == 200){
                let detailsList = res.data.data;
                this.$router.push({
                  path:"/UserDetails/" ,
                  query:{
                    user:row,
                    userDetails:detailsList
                  }
                })
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          editLabelFormClose(){
            this.editLabelVisible=false;
            this.$refs.editLabelForm.resetFields();
            this.labelids = [];
          },//编辑标签关闭
          doEditLabel(){
            this.editLabelForm.labelId=this.labelids
            this.$refs.editLabelForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "tuser/editLabelId";
              this.$axios.put(url,this.editLabelForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editLabelVisible = false ;
                  this.$refs.editLabelForm.resetFields();
                  this.editLabelForm.labelId=[];
                  this.labelids = [];
                  this.searchUser();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })
          },
          showEditLabelDialog(row){
            this.editLabelVisible=true;
            this.editLabelForm.id=row.id;
            this.editLabelForm.username=row.username;
            //找到该用户拥有的标签id
            for(let i=0;i<row.labels.length;i++){
              this.labelids.push(row.labels[i].id);
            }

          },//开启标签编辑



          doEdit(){

            this.$refs.editForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "member/updateMember";
              this.$axios.put(url,this.editForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editFormVisible = false ;
                  this.$refs.editLabelForm.resetFields();
                  this.searchUser();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })

          },
          editFormClose(){
            this.editFormVisible=false
            this.$refs.editForm.resetFields();
          },
          showEditDialog(row) {
            this.editFormVisible=true;
            this.editForm=row;
          },
            removeById(id) {
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                    let url = "member/del/"+id ;
                    this.$axios.delete(url)
                        .then(res=>{
                          if (res.data.code == 200){
                            this.$message({
                              type:"success",
                              message:res.data.msg,
                              duration:1000
                            })
                            this.searchMember();
                          }else {
                            this.$message({
                              type:"error",
                              message:res.data.msg,
                              duration:1000
                            })
                          }
                        })
                  }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });

            },
          readyAdd(){
            this.addFormVisible=true;
          },
          doAdd() {
              this.$refs.addForm.validate(valid=>{
                if (!valid){
                  return ;
                }
                console.log(this.addForm)

                let url = "member/add";
                this.$axios.post(url,this.addForm).then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    })
                    this.addFormVisible = false ;
                    this.$refs.addForm.resetFields();
                    this.searchMember();
                  }else {
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                });


              })
            },
          addFormClose() {
                this.$refs.addForm.resetFields();
                this.addFormVisible=false;
            },

         /* ==========================*/
          getMemberList(){
            let url = "member/queryAllMember";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.memberList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },

          getLabelList(){
            let url = "label/queryLabelName";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.labelList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },
          getSVipList() {
            let url = "member/queryAllSVip";
            this.$axios.get(url
            ).then(res=>{
              if (res.data.code == 200){
                this.SVipList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          getUserList() {
            let url = "tuser/queryAllUserByPage";
            this.$axios.get(url,{
              params:{
                mid:this.memberId,
                sid:this.isVip,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.userList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
            },
          changeUser(){
            this.getUserList();
          },
            searchUser(id) {
                this.pageNum = 1;
                this.memberId=id
                this.getUserList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getUserList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getUserList();
            },

            reloadData() {
                this.getUserList();
                this.searchUser();
                this.getSVipList();
                this.getMemberList();
                this.getLabelList();
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>


<style lang="less" scoped>
.item {
  margin: 4px;
}

</style>